import React, { useState, useEffect, useCallback } from 'react';
import {
    postSysDepartmentFindDepartment
} from '../../../Api/setUrl';
import ChangeModal from './components/ChangeModal'
import {
    PostManagementAll
} from './style';
import {
    PageHeader,
    Button,
    message,
    Table,
    Space
} from 'antd';

/**
 * @description: 部门管理
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-07-30） 修改设置负责人出错
 */

const PostManagement = () => {
    const [listData, setListData] = useState([]);
    const [addModalShow, setAddModalShow] = useState(false);
    const [clickCode, setClickCode] = useState(null);
    const [total, setTotal] = useState(0)
    const [size, setSize] = useState(10)
    const [currentPage, setCurrentPage] = useState(1)
    //搜索
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            ; (async () => {
                const { code, msg, data } = await postSysDepartmentFindDepartment(parames);
                if (code === '20000') {
                    setListData(data.records)
                    setTotal(data.total)
                    setSize(parames.size)
                    setCurrentPage(parames.currentPage)
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )

    useEffect(() => {
        listFun();
    }, [listFun]);
    //修改
    const handleChangeModal = (code) => {
        setClickCode(code)
        setAddModalShow(true)
    }
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${total}条`,
        //每页条数
        pageSize: size,
        //当前页数
        current: currentPage,
        //数据总数
        total: total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: size
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size
        }
        listFun(parames);
    }

    const columns = [
        {
            title: '部门主管',
            dataIndex: 'competent'
        },
        {
            title: '部门说明',
            dataIndex: 'explain'
        },
        {
            title: '部门名称',
            dataIndex: 'name'
        },
        {
            title: '操作',
            render: (text, recode) => (
                <Space>
                    <Button type='primary' onClick={() => handleChangeModal(recode.code)}>设置负责人</Button>
                </Space>
            )
        },
    ];
    return <PostManagementAll>
        <PageHeader
            className="site-page-header"
            title="岗位管理"
        ></PageHeader>
        <Table columns={columns} dataSource={listData} rowKey='id' pagination = {pagination} />
        <ChangeModal
            setAddModalShow={setAddModalShow}
            addModalShow={addModalShow}
            setClickCode={setClickCode}
            clickCode={clickCode}
            listFun={listFun}
        />
    </PostManagementAll>
}

export default PostManagement;